<template>
  <div class="app-container">
    <el-card>
      <div shadow="never" class="search-wrapper">
        <el-form ref="searchFormRef" :inline="true" :model="searchData">
          <el-form-item prop="appName" label="应用名称">
            <el-input v-model="searchData.appName" placeholder="请输入应用名称" clearable />
          </el-form-item>
          <!-- <el-form-item prop="name" label="用途">
          <el-input v-model="searchData.name" placeholder="请输入用途" clearable />
        </el-form-item> -->
          <el-form-item>
            <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
            <el-button :icon="Refresh" @click="resetSearch">重置</el-button>
            <el-button type="warning" :icon="Plus" @click="handleAdd">新增</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-card class="mt-4">
      <div v-loading="loading" shadow="never">
        <div class="table-wrapper">
          <el-table :data="tableData" max-height="64vh">
            <el-table-column prop="appName" label="应用名称" align="center" />
            <el-table-column prop="code" label="应用编码" align="center" />
            <el-table-column prop="key" label="应用key" align="center" />
            <el-table-column label="操作" align="center" width="240px">
              <template #default="scope">
                <el-button type="primary" text bg size="small" @click="handleUpdate(scope.row)">修改</el-button>
                <el-button type="danger" text bg size="small" @click="handleDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="flex justify-end">
            <el-pagination
              v-model:current-page="paginationData.currentPage"
              background
              layout="total, prev, pager, next"
              :total="paginationData.total"
              :page-size="paginationData.pageSize"
              @current-change="getTableData"
              :small="true"
              class="flex justify-end mt-2"
            />
          </div>
        </div>
      </div>
    </el-card>
    <AddApp v-model:visible="isShowAdd" :id="editId" @create="getTableData" />
  </div>
</template>

<script setup>
import { appList, appDel } from '@/api/system/appManagement'
import { Search, Refresh, Plus, ArrowDown } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { reactive } from 'vue-demi'
import AddApp from './components/addApp.vue'
const searchData = reactive({
  appName: ''
})
const paginationData = reactive({
  total: 0,
  pageSize: 10,
  currentPage: 1
})
const searchFormRef = ref(null)
const loading = ref(false)
const isShowAdd = ref(false)
const editId = ref('')
const tableData = ref([])
const handleAdd = () => {
  editId.value = ''
  isShowAdd.value = true
}
onMounted(() => {
  getTableData()
})
const handleSearch = () => {
  paginationData.currentPage = 1
  getTableData()
}
const resetSearch = () => {
  searchFormRef.value?.resetFields()
  if (paginationData.currentPage === 1) {
    getTableData()
  }
  paginationData.currentPage = 1
}
const handleUpdate = (row) => {
  editId.value = row._id
  isShowAdd.value = true
}
const getTableData = () => {
  loading.value = true
  appList({ ...searchData }, (paginationData.currentPage - 1) * paginationData.pageSize, paginationData.pageSize)
    .then((res) => {
      tableData.value = res.data.data
      paginationData.total = parseInt(res.data.total)
    })
    .finally(() => {
      loading.value = false
    })
}
const handleDelete = (row) => {
  ElMessageBox.confirm('确定删除该应用吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    appDel(row._id).then((res) => {
      ElMessage.success('删除成功')
      getTableData()
    })
  })
}
</script>

<style lang="scss" scoped></style>
